/* ---responsive-------------------------IPHONE--- */
/* ----------------------------------------IPAD--- */
@media screen and (max-width: 768px) {
    
  
   section {
      height: auto;
      padding: 20px 0
    }
    .section-box {
      height: auto;
    }
    header {
      flex-direction: column;
      gap: 20px;
    }
    /* LOGO Aulion---------------------------------------------- */
    .header-logo {
      font-size: 33px;
      margin: 20px 0;
      display: flex;
      justify-content: center;
    }
  /* LOGO Aulion---------------------------------------------- */
  /* MENÜ----------------------------------------------------- */
    nav {
      position: relative;
      top: 50px;
      flex-direction: column;
      gap: 5px;
    }
    .nav-items {
      font-size: 25px;
    }
    nav .active {
      color: rgb(0, 0, 0);
      font-size: 1.2rem;
      font-weight: 100;
      letter-spacing: 1.2rem;
   }
    .first-content h3 {
      font-size: 1.2rem;
      letter-spacing: 10px;
      margin-top: 30px;
    }

    .first-content h1 {
      font-size: 3.5rem;
      letter-spacing: 2px;
      line-height: 1.2;
      text-align: center;
      z-index: 1;
      padding-top: 10px;
    }
    .first-content {
      padding: 50px 0;
    }
  /* MENÜ------------------------------------------------- */
  /* image grün----------------ANFANG--------------------- */
    .first-img1 {
      width: 30%;
      margin-top: 50px;
      z-index: 1;
    }
  /* image hund------------------------------------------- */
    .first-img2 {
      position: sticky;
      bottom: 50px;
      left: 170px;
      width: 35%;
      z-index: 2;
    }

  /* image grün------------------ENDE--------------------- */
  /* Willkommen--------------ANFANG----------------------- */
    .first-content h4 {
      margin-top: 50px;
      font-size: 22px;
      color: rgb(255, 255, 255);
      letter-spacing: 3px;
      font-weight: 500;
    }
  /* Willkommen----------------ENDE----------------------- */ 
    .content-grid {
      display: flex;
      flex-direction: column;
      height: auto;
      gap: 50px;
      padding: 50px 5% ;
    }

  /* Fledermaus----------------ANFANG-------------------- */ 
    .projekt-img {
      width: 100%;
    }
    .projekt-img2{
      width: 25%;
      position: relative;
      bottom: 220px;
      animation: zoomIn 1s ease-in-out forwards;
      animation-delay: 0.2s;
    }
  /* Fledermaus---------------ENDE----------------------- */ 

  /* Text--------------------ANFANG---------------------- */ 
    #szenen .right-grid p {
      font-size: 18px;
      line-height: 1.8;
      color: rgb(0, 0, 0);
    }
    #portrait .left-grid p {
      font-size: 18px;
      line-height: 1.8;
      color: rgb(0, 0, 0);
    }
  /* Text--------------------ENDE------------------------- */ 

    .section-title {
      color: #1e1e1e;
      font-size: 1.5rem;
      text-align: center;
    }
  
    .content-first {
      padding: 50px 5%;
    }
 
    .footer-grid {
      display: flex;
      grid-template-columns: 1fr 1fr;
      row-gap: 50px;
      margin: 0 50px;
    }
    .footer-items {
      font-size: 18px;
    }
  
    .porim {
     visibility: hidden;
    }

    .textende, .impressumlink, .datenschutz {
      font-size: 0.95em;
      flex-direction: column;
    }

    .tag .day {
      font-size: 1em;
    }
    


}